<template>
  <view :style="colorStyle">
    <navTitle :title="'经验值'" />
    <image
      src="http://xpj40szpt.signalpha.cn/img/img92.png"
      class="topbg"
      mode="widthFix"
    />

    <view class="infobox1">
      <image
        src="http://xpj40szpt.signalpha.cn/img/img98.png"
        class="bg"
        mode="widthFix"
      ></image>
      <view class="block1">
        <view class="info1 cfff f28"> 当前经验值 </view>
        <view class="info2 cfff">
          {{ levelInfo.extNow }}
        </view>
      </view>
      <view class="block3">
        <view class="info1 c084E57 f24">
          今日获得经验值 {{ levelInfo.extDay }} 点，距离下个等级还需
          {{ levelInfo.extNext - levelInfo.extNow }} 经验值
        </view>
        <view class="info2">
          <view class="tip1" :style="{ width: `${levelInfo.percentage}%` }">
          </view>
        </view>
      </view>
    </view>

    <view class="infobox2">
      <view class="list" v-for="(item, index, key) in list" :key="key">
        <view class="block1 flex aitems between">
          <view class="info1 c1F1F1F f32">
            {{ item.remark }}
          </view>
          <view class="info2 c1F1F1F fontWeight f36"> +{{ item.amount }} </view>
        </view>
        <view class="block2 c858585 f28">
          {{ item.createTime }}
        </view>
      </view>

      <nodata v-if="list.length == 0" />
      <view class="" style="height: 100rpx"> </view>
    </view>
  </view>
</template>

<script>
import { userinfo, levelNow, levelLogPage } from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import colors from "@/mixins/color";
import { getToken } from "../../utils/storage";
import { go, loading } from "../../utils/wxAPI";
import { formatDate } from "@/utils/util.js";
export default {
  mixins: [colors],
  data() {
    return {
      info: {},
      level: {},
      levelInfo: {},
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      signInfo: {},
      configInfo: {},
      total: 0,
      list: [],
      current: 1,
    };
  },
  async onShow() {
    if (getToken()) {
      this.userinfo();
      this.levelNow();
      this.levelLogPage();
    }
  },
  methods: {
    async levelLogPage() {
      let { data } = await levelLogPage({
        current: 1,
        size: 20,
        // sourceType: 'social',
        // createTimeBegin: formatDate(Date.now()).dateValue + " 00:00:00",
        // createTimeEnd: formatDate(Date.now()).dateValue + " 23:59:59",
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data.records;
        this.total = data.data.total;
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
        setTimeout(() => {
          this.loadingPage = true;
        }, 500);
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },
    async levelNow() {
      loading();
      let { data } = await levelNow();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.levelInfo = info;
        let percentage = Number(info.extNow / info.extNext) * 100;
        this.levelInfo.percentage =
          Number(percentage) > 100 ? 100 : Number(percentage).toFixed(0);
      }
      uni.hideLoading();
    },
    async userinfo() {
      loading();
      let { data } = await userinfo();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.info = info;
      }
      uni.hideLoading();
      uni.stopPullDownRefresh();
    },
    gourl(url) {
      go(url);
    },
  },
  onReachBottom() {
    if (this.list.length == this.total) return;
    this.current += 1;
    this.levelLogPage();
  },
  async onPullDownRefresh() {
    this.userinfo();
    this.levelNow();
    this.levelLogPage();
    this.current = 1;
    this.handleBulletinPage();
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #141515;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #141515;
}

.topbg {
  position: absolute;
  width: 100%;
  top: 0;
}

.ruleModule {
  position: fixed;
  width: 172rpx;
  height: 64rpx;
  border-radius: 28rpx 0 0 28rpx;
  right: 0;
  top: 66rpx;
  z-index: 9;
  background: rgba(0, 0, 0, 0.4);
  line-height: 64rpx;
  text-align: center;
}

.infobox1 {
  position: relative;
  margin: 30rpx 30rpx 0;
  // width: 100%;

  .bg {
    // position: absolute;
    width: 100%;
  }

  .block1 {
    position: absolute;
    z-index: 1;
    top: 30rpx;
    left: 30rpx;

    .info1 {
      // margin-left: 16rpx;/*  */
    }

    .info2 {
      font-size: 72rpx;
    }
  }

  .block3 {
    position: absolute;
    left: 30rpx;
    top: 200rpx;

    .info1 {
    }

    .info2 {
      margin: 16rpx 0 0;
      width: 310rpx;
      height: 12rpx;
      border-radius: 16rpx;
      background: #fff;

      .tip1 {
        width: 50%;
        height: 12rpx;
        border-radius: 16rpx;
        background: #084e57;
      }
    }
  }
}

.infobox2 {
  position: relative;
  top: -120rpx;
  padding: 24rpx 30rpx;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #fff 16.28%);
  box-shadow: 0px 1rpx 0.6rpx 0px #fff inset;
  backdrop-filter: blur(61.45000076293945px);
  min-height: 1200rpx;

  .list {
    padding: 24rpx 0;

    .block1 {
      .info1 {
      }

      .info2 {
      }
    }

    .block2 {
      margin: 16rpx 0 0;
    }
  }
}
</style>
